import { createInput, createSelect, createSlot, commonRules, createDate } from '@/components/DynamicForm/config'
import { ref, computed } from 'vue'

const caseTypeList = [
  { value: '1', label: '简易案件' },
  { value: '2', label: '一般案件' },
  { value: '3', label: '重大案件' },
]

export const pageConfig = () => {
  const formConfig = {
    labelWidth: '100px',
    inline: true,
    keyup: true,
    buttonAlign: 'right',
    isSearch: true,
    showAdvancedSearch: true,
    buttons: [
      { text: '搜索', type: 'primary', action: 'submit' },
      { text: '重置', action: 'reset' },
    ],
  }
  const formItems = [
    createInput('关键词搜索', 'keyWords', {
      placeholder: '请输入关键词搜索',
      style: { width: '220px' },
      props: {
        clearable: true,
      },
    }),
    createInput('当事人名称', 'partyName', {
      placeholder: '请输入当事人名称',
      style: { width: '220px' },
      props: {
        clearable: true,
      },
    }),
    createSelect('案件来源', 'caseSource', {
      dictKey: 'case_source',
      placeholder: '请选择案件来源',
      style: { width: '220px' },
      props: {
        clearable: true,
      },
    }),
    createSelect('立案程序', 'caseProcedure', {
      placeholder: '请选择立案程序',
      style: { width: '220px' },
      props: {
        clearable: true,
      },
      options: caseTypeList,
    }),
    createSelect('案件状态', 'status', {
      dictKey: 'caseStatus',
      placeholder: '请选择案件状态',
      style: { width: '220px' },
      props: {
        clearable: true,
      },
    }),
    createSlot('立案时间', 'dateRange', {
      slotName: 'dateRange',
      style: { width: '220px' },
    }),
  ]
  const columns = ref({
    caseNo: { label: '立案号', visible: true },
    partyName: { label: '当事人名称', visible: true },
    caseCause: { label: '案由', visible: true },
    caseSource: { label: '案件来源', visible: true },
    caseProcedure: { label: '立案程序', visible: true },
    status: { label: '案件状态', visible: true },
    applyTime: { label: '立案时间', visible: true },
  })
  const newColumns = computed(() => [
    {
      type: 'index',
      label: '序号',
      width: 60,
      align: 'center',
      slots: {
        default: 'index',
      },
    },
    ...(columns.value.caseNo.visible
      ? [
          {
            label: '立案号',
            key: 'caseNo',
            prop: 'caseNo',
            align: 'center' as const,
            minWidth: 180,
          },
        ]
      : []),
    ...(columns.value.partyName.visible
      ? [
          {
            label: '当事人名称',
            key: 'partyName',
            prop: 'partyName',
            align: 'center' as const,
            minWidth: 200,
          },
        ]
      : []),
    ...(columns.value.caseCause.visible
      ? [
          {
            label: '案由',
            key: 'caseCause',
            prop: 'caseCause',
            align: 'center' as const,
            minWidth: 220,
          },
        ]
      : []),
    ...(columns.value.caseSource.visible
      ? [
          {
            label: '案件来源',
            key: 'caseSource',
            prop: 'caseSource',
            align: 'center' as const,
            minWidth: 180,
            cellRenderer: {
              type: 'dictField',
              dictKey: 'case_source',
            },
          },
        ]
      : []),
    ...(columns.value.caseProcedure.visible
      ? [
          {
            label: '立案程序',
            key: 'caseProcedure',
            prop: 'caseProcedure',
            align: 'center' as const,
            minWidth: 180,
            cellRenderer: {
              type: 'dictField',
              dictKey: 'caseTypeList',
            },
          },
        ]
      : []),

    ...(columns.value.status.visible
      ? [
          {
            label: '案件状态',
            key: 'status',
            prop: 'status',
            align: 'center' as const,
            minWidth: 180,
            slots: {
              default: 'caseStatus',
            },
          },
        ]
      : []),
    ...(columns.value.applyTime.visible
      ? [
          {
            label: '立案时间',
            key: 'applyTime',
            prop: 'applyTime',
            align: 'center' as const,
            width: 160,
          },
        ]
      : []),
    {
      label: '操作',
      key: 'action',
      prop: 'action',
      align: 'center' as const,
      fixed: 'right' as const,
      slots: {
        default: 'action',
      },
    },
  ])

  const formConfigDetail = {
    labelWidth: '140px',
    gutter: 20,
    defaultSpan: 8,
    keyup: true,
    buttonAlign: 'center',
    isSearch: true,
    buttons: [],
  }
  const formItemsDetail = [
    createInput('当事人名称', 'partyName', {
      placeholder: '请输入当事人名称',
      style: { width: '100%' },
      props: {
        clearable: true,
      },
      rules: [commonRules.required('当事人名称不能为空')],
    }),
    createInput('案由', 'caseCause', {
      placeholder: '请输入案由',
      style: { width: '100%' },
      props: {
        clearable: true,
      },
      rules: [commonRules.required('案由不能为空')],
    }),
    createInput('立案号', 'caseNo', {
      placeholder: '请输入立案号',
      style: { width: '100%' },
      props: {
        clearable: true,
      },
      rules: [commonRules.required('立案号不能为空')],
    }),
    createDate('立案时间', 'applyTime', {
      type: 'date',
      placeholder: '请选择立案时间',
      props: {
        clearable: true,
        style: { width: '100%' },
      },
      rules: [commonRules.required('立案时间不能为空')],
    }),
    createSelect('案件来源', 'caseSource', {
      dictKey: 'case_source',
      placeholder: '请选择案件来源',
      style: { width: '220px' },
      props: {
        clearable: true,
      },
    }),
  ]
  return {
    columns,
    newColumns,
    formConfig,
    formItems,
    formConfigDetail,
    formItemsDetail,
  }
}
